<template>
	<view class="page">
		<topVue title="积分明细"></topVue>
		
		<!-- banner部分 -->
		<view class="bannerVue margin0 padding20">
			<view class="pointVue margin0 flex-between">
				<view class="point padding20 flex-column flex-between" style="width: 200rpx;">
					<view class="label">
						<text style="line-height: 1;">绿色积分</text>
					</view>
					<view class="value">{{balanceInfo.greenPoints/100}}</view>
				</view>
				<view class="point padding20 flex-column flex-between" style="width: 200rpx;">
					<view class="label">
						<text style="line-height: 1;">消费积分</text>
					</view>
					<view class="value">{{balanceInfo.spendPoints/100}}</view>
				</view> 
				<view class="point padding20 flex-column flex-between" style="width: 200rpx;">
					<view class="label">
						<text style="line-height: 1;">数值积分</text>
					</view>
					<view class="value">{{balanceInfo.numericalIntegration/100}}</view>
				</view> 
			</view>
			<view class="pointVue margin30 flex-between">
				<view class="point padding20 flex-column flex-between" style="height: auto;">
					<view class="label">今日新增</view>
					<view style="color: #1CC289; font-size: 24rpx; line-height: 1; padding: 15rpx 0; font-weight: 600;">绿色积分：{{balanceInfo.newTodayGreenPoints/100}}</view>
					<view style="color: #60A5FA; font-size: 24rpx; line-height: 1; font-weight: 600;">消费积分：{{balanceInfo.newTodaySpendPoints/100}}</view>
				</view>
				<view class="point padding20 flex-column flex-between" style="height: auto;">
					<view class="label">本月累计</view>
					<view style="color: #1CC289; font-size: 24rpx; line-height: 1; padding: 15rpx 0; font-weight: 600;">绿色积分：{{balanceInfo.monthGreenPoints/100}}</view>
					<view style="color: #60A5FA; font-size: 24rpx; line-height: 1; font-weight: 600;">消费积分：{{balanceInfo.monthSpendPoints/100}}</view>
				</view> 
			</view>
		</view>
		
		<!-- 全部、绿色积分、消费积分切换 -->
		<view class="subsectionVue margin30 padding-row30">
			<u-subsection :list="tabs" :current="current" bg-color="#f5f5f5" active-color="#fff" button-color="#1CC289" @change="tabChange"></u-subsection>
		</view>
		
		<!-- 下拉框选择 -->
		<view class="dropdownVue margin20 padding-row30 flex-between align-center">
			<view class="dropdown flex-between align-center padding-row10" @click="isType=true">
				<text>{{ type }}</text>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;" v-if="type=='流水方向'"></image>
				<image src="../../static/close.png" style="width: 30rpx; height: 30rpx;" v-else @click.stop="typeClear()"></image>
			</view>
			<view class="dropdown flex-between align-center padding-row10" @click="isCome=true">
				<text>{{ come }}</text>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;" v-if="come=='积分来源'"></image>
				<image src="../../static/close.png" style="width: 30rpx; height: 30rpx;" v-else @click.stop="comeClear()"></image>
			</view>
			<view class="dropdown flex-between align-center padding-row10" @click="isDate=true;">
				<text>{{ date || "时间筛选" }}</text>
				<image src="../../static/close.png" style="width: 30rpx; height: 30rpx;" v-if="date" @click.stop="dateClear()"></image>
			</view>
		</view>
		
		<u-empty text="列表为空" v-if="list.length===0" margin-top="100"></u-empty>
	
		<view class="item margin0" v-for="(item,index) in list" :key="index">
			<view class="flex">
				<view class="iconVue relative">
					<image src="../../static/green_g.png" style="width: 48rpx; height: 48rpx;" class="absolute-auto"></image>
				</view>
				<view class="flex-1 flex-column flex-between" style="height: 88rpx; padding-left: 20rpx;">
					<view class="flex-between">
						<view class="label">{{item.title}}</view>
						<view class="num" :class="{colorActive: String(item.price).startsWith('-')}">{{item.price/100}}</view>
					</view>
					<text style="line-height:1;">{{item.createTime | formatTime("YMDHMS")}}</text>
				</view>
			</view>
		</view>
		<u-action-sheet :list="types" v-model="isType" @click="typeChange"></u-action-sheet>
		<u-action-sheet :list="comes" v-model="isCome" @click="comeChange"></u-action-sheet>
		<u-calendar v-model="isDate" mode="date" active-bg-color="#1CC289" active-color="#FFF" @change="dataChange"></u-calendar>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data(){
			return { 
				current: 0,
				tabs: [{name: "全部"}, {name: "绿色积分"}, {name: "消费积分"}, {name: "数值积分"}],
				tab: "",
				
				types: [{text: "支出"}, {text: "收入"}],
				type: "流水方向",
				isType: false,
			
				isCome: false,
				comes: [{text: '直推用户消费'}, { text: '首次消费补贴'}, { text:'完成推广任务'}, { text:'中级合伙人补贴'}],
				come: "积分来源",
				
				isDate: false,
				date: "",
				pageNum: 1,
				pageSize: 10,
				list: [],
				pages: 0,
			}
		},
		computed: {
			...mapState({
				user: state => state.user,
				balanceInfo: state => state.balanceInfo
			})
		},
		
		async mounted() {
			await this.getList()
		},
		
		async onReachBottom() {
			if(this.pageNum===this.pages) return
			this.pageNum++
			await this.getList()
		},
		
		onShow() {
			setTimeout(()=>{
				this.$request("/app-api/pay/wallet-transaction/countUserPoints", 'GET', {
					userId: this.user.id
				}).then(res=>{
					if(res.code===0) {
						console.log("积分信息", res.data)
						this.$store.state.balanceInfo = res.data
					}
				})
			}, 500)
		},
		methods: {
			async getList(){
				const result = await this.$request("/app-api/pay/wallet-transaction/getPipelining", "POST", {
					flowDirection: this.type === "流水方向" ? "" : this.type, //流水方向 支出/收入
					sourceOfPoints: this.come === "积分来源" ? "" : this.come,  //积分来源 消费补贴,平台补贴
					time: this.date,
					theTypeOfCredit: this.tab,  // 绿色积分/消费积分/数值积分
					userId: this.user.id,
					pageNo: this.pageNum,
					pageSize: this.pageSize
				})
				if(result.code===0) {
					this.list = this.list.concat(result.data.list)
					this.pages = Math.ceil(result.data.total/this.pageSize)
					console.log(this.list)
				}
			},
			
			async typeChange(e){
				console.log(e)
				this.type = this.types[e].text
				this.pageNum = 1
				this.list = []
				await this.getList()
			},
			
			async typeClear(){
				this.type = "流水方向"
				this.pageNum = 1
				this.list = []
				await this.getList()
			},
			
			
			async comeChange(e){
				console.log(e)
				this.come = this.comes[e].text
				this.pageNum = 1
				this.list = []
				await this.getList()
			},
			
			async comeClear(){
				this.come = "积分来源"
				this.pageNum = 1
				this.list = []
				await this.getList()
			},
			
			async tabChange(e){
				console.log(e)
				if(e==0) {
					this.tab = ""
					this.pageNum = 1
					this.list = []
					await this.getList()
				}else{
					this.tab = this.tabs[e].name
					this.pageNum = 1
					this.list = []
					await this.getList()
				}
			},
			
			async dataChange(e){
				console.log(e)
				this.date = `${e.year}-${e.month}-${e.day}`
				this.pageNum = 1
				this.list = []
				await this.getList()
			},
			
			async dateClear(){
				this.date = ""
				this.pageNum = 1
				this.list = []
				await this.getList()
			},
		}
	}
</script>

<style lang="less" scoped>
	.bannerVue {
		width: 690rpx;
		background: linear-gradient(to right, #1CC289, #60A5FA);
		border-radius: 18rpx;
		.pointVue {
			width: 630rpx;
			.point {
				width: 310rpx;
				height: 120rpx;
				background: #fff;
				border-radius: 18rpx;
				.label {
					color: #4B5563;
					font-size: 24rpx;
					line-height: 1;
					padding-top: 0;
				}
				.value {
					color: #000;
					line-height: 1;
					font-weight: 600;
				}
			}
		}
	}
	
	.dropdownVue {
		width: 100%;
		height: 72rpx;
		.dropdown {
			height: 72rpx;
			border: #E5E7EB 1rpx solid;
			border-radius: 15rpx;
			text {
				color: #4B5563;
				line-height: 1;
			}
		}
		.dropdown:nth-child(1) {
			width: 180rpx;
		}
		.dropdown:nth-child(2) {
			width: 280rpx;
		}
		.dropdown:nth-child(3) {
			width: 220rpx;
		}
	}
	
	.item {
		width: 690rpx;
		height: 148rpx;
		border-bottom: 1rpx solid #f5f5f5;
		padding: 30rpx 0;
		.iconVue {
			width: 88rpx;
			height: 88rpx;
			background: #EFF6FF;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}
		.label {
			color: #000;
			font-weight: 600;
		}
		.num {
			color: #1CC289;
			font-weight: 600;
		}
		.colorActive {
			color: #FF3B30;
		}
	}
</style>